<template>
	<view class="headerlist">
		<view class="headers"   v-for="item in list" :key="item.id">
			<view class="touxiang">
				<image :src="item.shop_urls" mode=""></image>
			</view>
			<view class="jieshao">
				<div>
					<h3>{{item.shop_name}}</h3>
				</div>
				<div>
					<p>店主：{{item.true_name}}</p>
				</div>
				<div>
					<p>电话：{{item.shop_tel}}</p>
				</div>
		
			</view>
			<view class="xiaoshoue">
				<div class="money" >
					总销售额度：<span>￥{{item.money}}</span>
				</div>
				<div>
					
				</div>
		
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return {
				token:1234567,
				list1:"",
				list:[
					{
						id:1,
						url:"http://pic.sc.chinaz.com/files/pic/pic9/202007/apic26672.jpg",
						shop:"婉君百货店",
						name:"婉君",
						phone:"029-85415614",
						money:9989
					},
					{
						id:2,
						url:"http://pic.sc.chinaz.com/files/pic/pic9/202007/apic26613.jpg",
						shop:"茹儿服装店",
						name:"茹儿",
						phone:"029-8541545",
						money:15670
					},
					{
						id:3,
						url:"http://pic.sc.chinaz.com/files/pic/pic9/202007/apic26674.jpg",
						shop:"倩倩水果店",
						name:"倩儿",
						phone:"1541151614",
						money:6050
					}
				]
			}
		},
		onLoad() {
			this.chongzhi()
		},
		methods:{
			chongzhi(){
				var that=this
				wx.request({
				  url: 'http://pddht.com/index.php/api/v1.Shop/getAgentShopList?page=1&limit=3', //仅为示例，并非真实的接口地址
				  method:'post',
				  data: {
				   // token:wx.getStorageSync("我的token"),
				   // amount:this.num
				  },
				   header: {
				      token: 1234567// 默认值
				    },
				  success(res){
					console.log("列表生成成功")
					console.log(res.data.data)
					that.list=res.data.data
				  },
				  fail(){
					  console.log("充值失败")
				  }
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	span{
		color: red;
	}
	.headerlist{
		height: 100%;
		background-color: #F1F1F1;
		/* border: 1px solid red; */
	}
	.headers {
		background-color: #FFFFFF;
		// height: 230upx;
		h3 {
			font-size: 30upx;
		}
		border-bottom: 1px solid #ffffff;
		margin-bottom: 18upx;
		// background-color: green;
		align-items: center;
		font-size: 24upx;
		height: 227upx;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		text-align: left;
		p {
			color: lightslategray;
		}
		.touxiang {
			margin-left: 22upx;
			image {
				background-color: gainsboro;
				border-radius: 50%;
				width: 150upx;
				height: 150upx;
	
			}
		}
		.jieshao {
			// background-color: red;
			
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			height: 150upx;
		}
	
		.xiaoshoue {
			height: 227upx;
			// background-color: green;
			height: 150upx;
			overflow: hidden;
			width: 250upx;
			color: #999999;
			.red{
				color: red;
			}
		}
	
	}
</style>
